<template>
  <div class="more-container">
    <div class="inner-content">
      <!-- 顶部表单区域 -->
      <el-row>
        <el-col :span="4" style="margin-right: 15px">
          <el-input
            v-model="topForm.searchword"
            clearable
            placeholder="名称/联系人/联系电话"
          ></el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 15px">
          <el-select
            v-model="topForm.subject"
            placeholder="科目"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in subjectOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="margin-right: 15px">
          <el-select
            v-model="topForm.school"
            placeholder="所属学校"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <!-- 中部按钮区域 -->
      <commonline
        :newText="'训练场'"
        @addList="additem"
        @searchlist="searchlist"
        @resetform="resetform"
        :isshowAdd="checkPermission(['trainplaceAdd'])"
      ></commonline>
      <!-- 新增弹窗 -->
      <trainingdialog
        :formType="formtype"
        :isshowDialog="isshowDialog"
        :dialogTitle="dialogtitle"
        @confirm="confirm"
        @closedialog="closedialog"
      ></trainingdialog>

      <!-- 表单表格 -->
      <trainingtable
        @openedit="openedit"
        :tabData="tabList"
        @changepageTotal="changepageTotal"
        @changepage="changepage"
        @deleteitem="deleteitem"
        v-if="isDataSuccess"
        @switchBack='switchBack'
      ></trainingtable>
    </div>
  </div>
</template>

<script>
import trainingdialog from './component/trainingdialog'
import trainingtable from './component/trainingtable'
import commonline from '@/components/commonline/commonline'
//api
import { gettrainList, deleteData } from '@/api/train'
//获取sessionStorage
import {getSessionStorage} from '@/utils/accessToken'
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      //是否显示导入按钮
      isshowimportbnt:false,
       //数据是否请求成功
      isDataSuccess:false,
	  //弹窗标题
      dialogtitle: '新增训练场',
      //新增还是编辑
      formtype: 0,
      //表格数据
      tabList: {},
      //翻页总数
      pageTotal: 10,
      //第几页
      page: 1,
      //是否显示弹窗
      isshowDialog: false,
      //选中的那个tab
      activetab: 3,
      // 顶部筛选表单
      topForm: {
        searchword: '',
        subject: '',
        school: '',
      },
      //科目选项
      subjectOptions: [
        {
          label: '科目二',
          value: 2,
        },
        {
          label: '科目三',
          value: 3,
        },
      ],
      //选项
      options: [],
    }
  },
  methods: {
    // 按钮权限
    checkPermission,
     //列表切换switch 触发的事件
    switchBack(){
       this.gettrainListData(this.page, this.pageTotal)
    },
    //总数翻页
    changepageTotal(val) {
      this.pageTotal = val
      this.gettrainListData(this.page, this.pageTotal)
    },
    //翻页
    changepage(val) {
      this.page = val
      this.gettrainListData(this.page, this.pageTotal)
    },
    //删除
    async deleteitem(id) {
      let params = {
        id,
      }
      //询问客户是否删除
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let data = await deleteData(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          }
          //刷新列表
          this.gettrainListData(this.page, this.pageTotal)
        })
        .catch(() => {})
    },
    confirm() {
      this.isshowDialog = false
      this.isDataSuccess = false
      //刷新列表
      this.gettrainListData(this.page, this.pageTotal)
    },
    //请求列表数据
    async gettrainListData(page=1, rows = 10) {
      let params = {
        page,
        rows
      }
      if (this.topForm.searchword) {
        params.keyword = this.topForm.searchword
      }
      if (this.topForm.school) {
        params.school_id = this.topForm.school
      }
      if (this.topForm.subject) {
        params.subject_type = this.topForm.subject
      }
      let data = await gettrainList(params)
      this.tabList = data.data
      //数据请求成功
      this.isDataSuccess = true
    },
    //编辑
    openedit(val) {
      this.$bus.emit('editformxlc', val)
      this.formtype = val.type
      this.dialogtitle = '编辑训练场'
      this.isshowDialog = true
    },
    //点击打开弹窗
    additem() {
      this.isshowDialog = true
    },
    //关闭弹窗
    closedialog() {
      this.formtype = 0
      this.isshowDialog = false
    },
    //搜索查询
    searchlist() {
       this.$message({
            type: 'success',
            message: '查询成功!'
          });
      this.gettrainListData(this.page, this.pageTotal)
    },
    // 重置
    resetform() {
      this.topForm = {
        searchword: '',
        subject: '',
        school: '',
      }

      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.page = 1
      this.pageTotal = 10
      this.gettrainListData(this.page, this.pageTotal)
    },
    changetab(id) {
      this.activetab = id
    },
  },
  components: {
    commonline,
    trainingdialog,
    trainingtable
  },
  mounted() {
    //获取学校选项
    this.options = getSessionStorage('Optionsall')['school']
    //获取列表数据
    this.gettrainListData(this.page, this.pageTotal)
  },
}
</script>

<style scoped lang='scss'>

</style>
